<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../cwjy/css/app.css" rel="stylesheet">
    <style>
        html::-webkit-scrollbar {
            display: none
        }
    </style>
</head>
<script src="../cwjy/js/app.js"></script>
<script src="../cwjy/js/jquery.min.js"></script>
<body>
<div class="card">
    <div class="card-header">
        <div>
            <div style="float:left;">
                <span style="font-weight: bold;font-size: 20px;text-shadow: 1px 1px 2px #000000;">商品类别</span>
            </div>
            <div style="float: right;margin-right: 7%">
            <button  type="button" class=" " data-feather="plus-circle" data-toggle="modal"
                    data-target="#defaultModalPrimary" onclick="initMode('addData()')"></button>
            </div>
        </div>
        <table class="table table-striped" cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th style="width:20%;">序号</th>
                <th style="width:20%;">类别名称</th>
                <th style="width:25%">创建人</th>
                <th class="d-none d-md-table-cell" style="width:25%">创建时间</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Vanessa Tucker</td>
                <td>864-348-0485</td>
                <td>864-348-0485</td>
                <td class="d-none d-md-table-cell">June 21, 1961</td>
                <td class="table-action">
                    <a href="#"><i class="align-middle" data-feather="eye" onclick="initModeViewDetails()" data-toggle="modal" data-target="#defaultModalPrimary"></i></a>
                    <a href="#"><i class="align-middle" data-feather="edit-2" onclick="updateText()" data-toggle="modal" data-target="#defaultModalPrimary"></i></a>
                    <a href="#"><i class="align-middle" data-feather="trash"></i></a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!--模态框-->

<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" id = "modelHead">

            </div>
            <div class="modal-body m-3">
                <div class="card-body" id="modelDiv">

                </div>
            </div>
            <div class="modal-footer" id="modelAction">

            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function addType() {
        addNodeMessage("")
        feather.replace();
        initClassificationDetailedClick();
    }

    function addNodeMessage(name) {
        let temp = "    <div class=\"col-md-12\" >\n" +
            "                                    <div class=\"col-md-11\" style=\"float: left\">\n" +
            "                                        <input type=\"text\" class=\"form-control \"\n" +
            "                                               placeholder=\"类型名称\" value='"+name+"' style=\"margin-bottom: 10px\">\n" +
            "                                    </div>\n" +
            "                                    <div class=\"col-md-1\" style=\"float: left\">\n" +
            "                                   <span>     <button type=\"button\" data-feather=\"x-circle\"\n" +
            "                                                style=\"float: right;margin-top: 15%;color: red\"></button>\n" +
            "                                    </div></span>\n" +
            "                                </div>";
        $('#classification_detailed').append(temp)
    }

    function initClassificationDetailedClick() {
        $('#classification_detailed span').unbind("click")
        $('#classification_detailed span').click(function () {
            if (confirm('是否删除该节点?')) {
                $(this).parent().parent().remove()
            }
        })
    }
    initClassificationDetailedClick();
    function addData() {
        let classification_name = $('#classification_name');
        let type_name = $('#classification_detailed')
        type_name.find("input").each(function () {
        })
    }
    function initMode(onType) {
        let modiv = "<div class=\"mb-3 col-md-12\">\n" +
            "                            <label class=\"form-label\" for=\"classification_name\">类别名称</label>\n" +
            "                            <input type=\"email\" class=\"form-control\" id=\"classification_name\" placeholder=\"类别名称\">\n" +
            "                        </div>\n" +
            "                        <div class=\"mb-3  col-md-12\">\n" +
            "                            <label class=\"form-label\">类型名称</label>\n" +
            "                            <button type=\"button\" class=\"form-label\" for=\"type_name\" data-feather=\"plus-circle\"\n" +
            "                                    style=\"float: right\" onclick=\"addType()\"></button>\n" +
            "                            <div id=\"classification_detailed\">\n" +
            "                                <div class=\"col-md-12\">\n" +
            "                                    <div class=\"col-md-11\" style=\"float: left\">\n" +
            "                                        <input type=\"text\" class=\"form-control \"\n" +
            "                                               placeholder=\"类型名称\" style=\"margin-bottom: 10px\">\n" +
            "                                    </div>\n" +
            "                                    <div class=\"col-md-1\" style=\"float: left\">\n" +
            "                                        <span>\n" +
            "                                        <button type=\"button\" data-feather=\"x-circle\"\n" +
            "                                                style=\"float: right;margin-top: 15%;color: red\"\n" +
            "                                        ></button>\n" +
            "                                            </span>\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                            </div>\n" +
            "                        </div>";
        $('#modelDiv').html(modiv)

        let modelHead = " <h3 class=\"modal-title\" id='modelHeadText'>类别增加</h3>\n" +
            "                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n" +
            "                    <span aria-hidden=\"true\">&times;</span>\n" +
            "                </button>";

        $('#modelHead').html(modelHead)

        let modelAction = " <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>\n" +
            "                <button type=\"button\" class=\"btn btn-primary\" onclick=\""+onType+"\">Save changes</button>";
        $('#modelAction').html(modelAction)
        feather.replace();
    }



    function initModeViewDetails(){
        let modelHead = "<h3 class=\"modal-title\">类别详细</h3>\n" +
            "                   <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n" +
            "                       <span aria-hidden=\"true\">&times;</span>\n" +
            "                   </button>";
        let modelDiv = "   <h1>类别名称</h1>\n" +
            "                    <p class=\"text-muted\">Etiam rhoncus. Maecendio et ante tincidunt tempus. Donec vitae sapien ut libero.</p>\n" +
            "                    <h1>类型详细</h1>\n" +
            "                    <p class=\"text-muted\">Etiam rhoncus. Maecenatincidunt tempus. Donec vitae sapien ut libero.</p>\n" +
            "                    <p class=\"text-muted\">Etiam rhoncus. Maecenatincidunt tempus. Donec vitae sapien ut libero.</p>\n" +
            "                    <p class=\"text-muted\">Etiam rhoncus. Maecenatincidunt tempus. Donec vitae sapien ut libero.</p>\n" +
            "                    <p class=\"text-muted\">Etiam rhoncus. Maecenatincidunt tempus. Donec vitae sapien ut libero.</p>";
        let modelAction = "  <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>";
        $('#modelHead').html(modelHead)
        $('#modelDiv').html(modelDiv)
        $('#modelAction').html(modelAction)
    }

    function updateText() {
        initMode('updateData()');
        $('#classification_detailed').html("")
        $('#modelHeadText').html("类型修改")
        $('#classification_name').val("测试")
        for (let i = 0; i < 5; i++) {
            addNodeMessage("测试" + i);
        }
        initClassificationDetailedClick();
        feather.replace();
    }
    function updateData() {
        alert('修改成功')
    }


</script>

</body>
</html>